<template>
  <div class="m-title">
    <div class="icon" v-if="icon.length>0">
      <img :src="require('./images/'+icon+'.png')" alt="">
    </div>
    <TimeFilter v-if="filter" ref="timeFilter" @search="search"></TimeFilter>
  </div>
</template>

<script>
import TimeFilter from '../time-filter/time-filter'

export default {
  components: {
    TimeFilter
  },
  props: {
    icon: {
      type: String,
      default: ''
    },
    filter: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    getForm() {
      return this.$refs.timeFilter.getForm()
    },
    search(form) {
      this.$emit('search', form)
    }
  }
}
</script>

<style scoped lang="scss">
.m-title {
  width: 370px;
  height: 42px;
  background: url("./images/bg.png") no-repeat center;
  background-size: 100% 100%;
  margin-bottom: 10px;
  position: relative;
  .icon {
    position: absolute;
    top: 45%;
    transform: translate(0, -50%);
    left: 80px;
    > img {
      display: block;
      height: 18px;
    }
  }
}
</style>
